<template>
  <el-row>
    <el-col :span="2" :xs="2" :sm="2" :md="4" :lg="4">
      <div style="font-size: 12px;text-align: left"> For more info, pls refer to
        <a href="https://platform.openai.com/">ChatGPT</a>
      </div>
    </el-col>
    <el-col :span="20"  :xs="20" :sm="20" :md="16" :lg="16" >
      <el-form label-width="80px">
          <el-form-item label="model">
              <el-select v-model="model" placeholder="model">
                <el-option v-for="item in models" :key="item" :label="item" :value="item"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="temperature">
            <el-input-number  :min="0" :max="1" :step="0.1" v-model="temperature"></el-input-number>
          </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <el-input
          type="textarea"
          v-model="prompt"
          placeholder="Input your question"
          :autosize="{minRows:4}">
      </el-input>

      <el-button :loading="loading" v-on:click="ask" size="medium" type="primary" style="width: 100%;margin: 20px 0">submit</el-button>
      <el-card  style="text-align: left">
        <p style="white-space: pre-wrap">
          {{responseText}}
        </p>

      </el-card>
    </el-col>
    <el-col :span="2"></el-col>
  </el-row>

<!--  <el-row :gutter="20">-->
<!--    <el-col :span="6"><div class="grid-content bg-purple">1</div></el-col>-->
<!--    <el-col :span="6"><div class="grid-content bg-purple">2</div></el-col>-->
<!--    <el-col :span="6"><div class="grid-content bg-purple">3</div></el-col>-->
<!--    <el-col :span="6"><div class="grid-content bg-purple">4</div></el-col>-->
<!--  </el-row>-->
</template>

<script>
import "openai"
import axios from "axios";

export default {
  data() {
    return {
      loading: false,
      key: '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',
      prompt: '',
      temperature: 0.7,
      top_p: 1,
      max_tokens: 2048,
      frequency_penalty: 0.0,
      presence_penalty: 0.0,
      stop: null,
      model: 'text-davinci-003',
      models: ['text-davinci-003', 'text-davinci-002', 'text-curie-001'],
      responseText: '',
      download_disable: true
    }
  },
  name: 'HelloWorld',

  props: {
    msg: String
  },
  methods:{
    ask:function(event){
      console.log(event);
      if(this.prompt.trim() === ""){return;}
      this.$data.loading = true;

      let data = {
        prompt: this.prompt,
        temperature: this.temperature,
        top_p: this.top_p,
        model: this.model,
        max_tokens: this.max_tokens,
        frequency_penalty: this.frequency_penalty,
        presence_penalty: this.presence_penalty,
        stop: this.stop
      }
      console.log(data);
      this.loading = true
      axios.post('https://api.openai.com/v1/completions', data, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ` + this.key,
        }
      })
          .then(response => {
            this.loading = false
            this.responseText = response.data.choices[0].text;
            console.log("response: ",this.responseText)
            // this.respon
          })
          .catch(error => {
            alert("请求出错，请重新提问！")
            this.loading = false
            console.log(error);
          });

      // console.log(question);
    }
  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
</style>
